<template>
  <div class="advanced-setting">
    <div>
      <a-tabs :type="'rounded'" direction="vertical">
        <a-tab-pane key="1" title="高级设置">
          <div class="line-title">
            <div class="title-name">流程高级设置</div>
            <div class="content"></div>
            <div class="operater">操作</div>
          </div>
          <div class="line-title-nobg">
            <div class="title-name">允许加签</div>
            <div class="content">开启后审批单可以新增临时审批人</div>
            <div class="operater">
              <a-switch
                v-model:model-value="flowData.addSignature"
                :checked-value="1"
                :unchecked-value="2"
              />
            </div>
          </div>
          <div class="line-title-nobg">
            <div class="title-name">自动去重</div>
            <div class="content">
              审批流程中审批人重复出现时，只需审批一次其余自动通过
            </div>
            <div class="operater">
              <a-switch
                v-model:model-value="flowData.automaticWeightRemoval"
                :checked-value="1"
                :unchecked-value="2"
              />
            </div>
          </div>
          <div class="line-title-nobg">
            <div class="title-name">限时审批</div>
            <div class="content">设置所有审批节点的停留以及提醒时间</div>
            <div class="operater">
              <a-switch
                v-model:model-value="flowData.timeLimitedApproval"
                :checked-value="1"
                :unchecked-value="2"
              />
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="Tab 2"> Content of Tab Panel 2 </a-tab-pane>
      </a-tabs>
      <a-space
        direction="vertical"
        fill
        style="margin-top: 16px; align-items: center"
      >
        <a-button
          @click="emits('save', 'advanced')"
          :type="'primary'"
          style="width: 200px"
        >
          保存信息
        </a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Flow } from '@/apis/flow/type';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  //参数说明
  defineProps<{
    /**
     * 流程基础信息
     */
    data: Flow;
  }>(),
  {
    data: () => ({})
  }
);
const emits = defineEmits(['update:data', 'save']);
const flowData = useVModel(props, 'data', emits);
</script>
<style lang="less" scoped>
.advanced-setting {
  padding: 16px;
  // display: flex;
  // margin: 0 auto;
}
.line-title {
  background: #f2f3f5;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 5px 16px;
  .title-name {
    width: 200px;
  }
  .content {
    flex: 1;
  }
  .operater {
    width: 100px;
  }
}
.line-title-nobg {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 5px 16px;
  border-bottom: 1px solid #eee;
  .title-name {
    width: 200px;
  }
  .content {
    flex: 1;
  }
  .operater {
    width: 100px;
  }
}
</style>
